import * as React from 'react';
import { Card } from 'antd';
import InfoCard from '../info-card';
import Chart from '../chart';
import { barChartTemplate } from '../analysisPanel/template';
import './index.less';

interface OverviewProps {
    loading: boolean,
    successRate: number,
    successRateCompare: number,
    avg: number,
    avgCompare: number,
    requestTimes: number,
    requestTImesCompare: number,
    seriesData: string[] | number[]
}

export const distributionLevels = ['0 ~ 0.5s', '0.5s ～ 1s', '1s ～ 2s', '2s ～ 4s', '4s ～ 15s'];
export default function Overview(props: OverviewProps) {
    const { loading, successRate, successRateCompare, avg, avgCompare, requestTimes, requestTImesCompare, seriesData } = props;
    return <div className="overview-cards-wrap">
        <InfoCard loading={loading} title='请求成功率(%)' num={successRate * 100} compareNum={successRateCompare}></InfoCard>
        <InfoCard loading={loading} title='平均速度(ms)' num={avg} compareNum={avgCompare}></InfoCard>
        <InfoCard loading={loading} title='请求次数' fixedNum={0} num={requestTimes} compareNum={requestTImesCompare}></InfoCard>
        <Card
            bordered={false}
            hoverable
            style={{
                minWidth: 500,
                width: 'fit-content',
                marginRight: 50,
                minHeight: 280
            }}
            bodyStyle={{
                padding: 0
            }}
            loading={loading}
        >
            <Chart styleName='distribution-chart' option={barChartTemplate(`请求速度分布`, seriesData, distributionLevels)}></Chart>
        </Card>
    </div>
}